<template>
  <div class="playlist">
    <ch-playliststyle @labelname="labelname($event)" :themeColor="themecolor" />
    <ch-allplaylist :labelname="name" :themeColor="themecolor" />
  </div>
</template>

<script>
import PlaylistStyle from "./components/playliststyle";
import AllPlaylist from "./components/allplaylist";
export default {
  name: "playlist",
  components: {
    "ch-playliststyle": PlaylistStyle,
    "ch-allplaylist": AllPlaylist
  },
  props: {},
  data() {
    return {
      name: "", //标签名称
      themecolor: localStorage.getItem("themeColor") // 颜色
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.themeColor;
    }
  },
  watch: {
    themeColor() {
      this.themecolor = this.$store.state.themeColor;
    }
  },
  created() {},
  mounted() {},
  methods: {
    labelname(e) {
      this.name = e;
    }
  }
};
</script>

<style scoped lang="scss">
.playlist {
  padding: 0 9.375rem;
}
</style>
